<template>
  <Card :loading="loading" title="资产概览" :canExpan="false">
    <div style="height: 280px">
      <div class="py-4 px-4 flex justify-between">
        <span>资产总数量</span> <CountTo :startVal="0" :endVal="overviewData?.totalCount" class="text-2xl" />
        <!-- <Icon :icon="item.icon" :size="40" /> -->
      </div>

      <div class="py-4 px-4 flex justify-between">
        <span>资产总价格</span> <CountTo :startVal="0" suffix="￥" :endVal="overviewData?.totalPrice" class="text-2xl" />
        <!-- <Icon :icon="item.icon" :size="40" /> -->
      </div>

      <div class="py-4 px-4 flex justify-between">
        <span>资产报废数量</span>
        <CountTo :startVal="0" :endVal="overviewData?.destoryedTotalCount" class="text-2xl" />
        <!-- <Icon :icon="item.icon" :size="40" /> -->
      </div>

      <div class="py-4 px-4 flex justify-between">
        <span>资产报废金额</span><CountTo :startVal="0" suffix="￥" :endVal="overviewData?.destoryedTotalPrice" class="text-2xl" />
        <!-- <Icon :icon="item.icon" :size="40" /> -->
      </div>
    </div>
  </Card>
</template>
<script lang="ts" setup>
  import { CountTo } from '/@/components/CountTo/index';

  import { Card } from 'ant-design-vue';

  import { overviewDataProp } from './props';

  defineProps({
    loading: {
      type: Boolean,
    },
    overviewData: overviewDataProp,
  });
</script>
